<template>
  <div>
    <input type="text" v-model="title">
    <my-list :qqq='title' @ccc='f' />
    <my-button />
  </div>
</template>
<script>
// @ is an alias to /src
import MyList from './components/list'
//  组件的data为啥得是个函数 ？？ >> 为了保证数据的独立性
/* 
 A组件中 使用了 B组件 ； 那么 我们就把B称为A的子组件； A称为B的父组件

父传子 是通过自定义属性+props
子传父 是通过自定义事件+$emit
*/
export default {
  name: 'XXX',
  data() {
    return {
      title: "珠峰"
    }
  },
  methods: {
    f(n) {
      console.log("子组件传了一个", n)
      this.title = n
    }
  },
  components: {
    MyList
  }
}
</script>
<style lang="less">
</style>